@layer utils {
    [pad-] {
        &[pad-^='0'] {
            padding-left: 0;
            padding-right: 0;
        }
        &[pad-^='1'] {
            padding-left: 1ch;
            padding-right: 1ch;
        }
        &[pad-^='2'] {
            padding-left: 2ch;
            padding-right: 2ch;
        }

        &[pad-$='0'] {
            padding-top: 0;
            padding-bottom: 0;
        }
        &[pad-$='1'] {
            padding-top: 1lh;
            padding-bottom: 1lh;
        }
        &[pad-$='2'] {
            padding-top: 2lh;
            padding-bottom: 2lh;
        }
    }

    /* TODO: deprecate space- in favor of pad- */
    [space-] {
        &[space-~='px:0'] {
            padding-left: 0;
            padding-right: 0;
        }
        &[space-~='px:1'] {
            padding-left: 1ch;
            padding-right: 1ch;
        }
        &[space-~='px:2'] {
            padding-left: 2ch;
            padding-right: 2ch;
        }
    }
}
